<template>
    <Row class="page1">
        <Col :span="4">
            <div class="left">
                <span class="angle1"></span>
                <span class="angle2"></span>
                <span class="angle3"></span>
                <span class="angle4"></span>
                <div class="left1" style="height:20%;">
                    <el-card class="box-card" style="height: 100%;">
                        反应器类型选择
                        <el-divider></el-divider>
                        <el-select v-model="moduleSelect.value" placeholder="请选择" @change="getSensorList">
                            <el-option v-for="item in moduleSelect.reactorList" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-card>

                </div>
                <div class="left1" style="height:80%;">
                    <el-card class="box-card" style="height: 80%;">
                        <div v-if="moduleSelect.value == '' || moduleDetailInfo.detailInfo == ''">
                            过程变量
                        </div>
                        <div v-else>
                            <div v-for="item in moduleDetailInfo.detailInfo" :key="item.sensorId">
                                {{ item.sensorName }} : {{ item.value }}
                                <el-progress :percentage="item.percentageValue" :format="format"
                                             :color="customColorMethod"></el-progress>
                            </div>
                        </div>

                    </el-card>
                    <div style="align-self: center;height: 20%;">
                        <p width="100%" height="100%">这是两张图片</p>
                    </div>
                </div>
            </div>
        </Col>
        <Col :span="12" style="padding:0 0%;">
            <div class="center-top">

                <div ref="canvasParent" style="width: 100%;height: 100%;align-self: center;">
                    <processMap ref="process" :data="{param1: canvasParent, param2: allSensor}"></processMap>
                </div>
            </div>
            <div class="center-bottom">
                <span class="angle1"></span>
                <span class="angle2"></span>
                <span class="angle3"></span>
                <span class="angle4"></span>
                <div style="height: 100%;">
                    <el-card class="box-card" style="height: 20%;" shadow="never">
                        温控
                    </el-card>
                    <el-row>
                        <el-col :span="8">
                            <temperatureChart1 ref="temperatureChart1" :data="currentDetailInfo[0].reactorTemperature">
                            </temperatureChart1>
                        </el-col>
                        <el-col :span="8">
                            <temperatureChart2 ref="temperatureChart2"
                                               :data="currentDetailInfo[0].separatorTemperature">
                            </temperatureChart2>
                        </el-col>
                        <el-col :span="8">
                            <temperatureChart3 ref="temperatureChart3" :data="currentDetailInfo[0].stripperTemperature">
                            </temperatureChart3>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </Col>
        <Col :span="8">
            <div class="right-1">
                <div class="right1-1">
                    <span class="angle1"></span>
                    <span class="angle2"></span>
                    <span class="angle3"></span>
                    <span class="angle4"></span>
                    <div style="height: 100%;">
                        <div style="height: 20%;">
                            <el-card class="box-card" style="height: 100%;" shadow="never">
                                操纵变量
                                <el-divider ref=""></el-divider>
                                <el-button @click="drawer = true" type="danger" style="margin-left: 16px;">
                                    传感器异常
                                </el-button>
                                <el-divider ref=""></el-divider>
                                <el-drawer title="异常监控" :visible.sync="drawer" :with-header="false" size="50%">
                                    <div style="height: 50%;">
                                        <tValueChart ref="tValue" :data="predictData"></tValueChart>
                                    </div>
                                    <div style="height: 50%;">
                                        <speChart ref="spe" :data="predictData"></speChart>
                                    </div>

                                </el-drawer>
                            </el-card>
                        </div>

                        <div style="height: 20%;">
                            <detailChart1 ref="detail1" :data="flowDetail.data1"></detailChart1>
                        </div>


                        <div style="height: 20%;">
                            <detailChart2 ref="detail2" :data="flowDetail.data2"></detailChart2>
                        </div>

                        <div style="height: 20%;">
                            <detailChart3 ref="detail3" :data="flowDetail.data3"></detailChart3>
                        </div>

                        <div style="height: 20%;">
                            <detailChart4 ref="detail4" :data="flowDetail.data4"></detailChart4>
                        </div>
                    </div>
                </div>
            </div>
        </Col>
    </Row>

</template>

<script>
    const temperatureChart1 = () => import("./components/page1/temperature1");
    const temperatureChart2 = () => import('./components/page1/temperature2');
    const temperatureChart3 = () => import("./components/page1/temperature3")
    const processMap = () => import("./components/page1/processMap");

    const detailChart1 = () => import('./components/page1/detailChart1');
    const detailChart2 = () => import('./components/page1/detailChart2');
    const detailChart3 = () => import('./components/page1/detailChart3');
    const detailChart4 = () => import('./components/page1/detailChart4');

    const tValueChart = () => import('./components/page1/tValueChart');
    const speChart = () => import('./components/page1/speChart');


    import {
        getReactorCategoryList,
        getReactorSensorList,
        getReactorAllSensorList,
        getAllSensorList
    } from "../config/detail"
    import {getCurrentReactorSensorList} from "../config/currentInfo"
    import {trainModelService, predictModelService} from "../config/model";
    import moment from "moment";

    export default {
        name: "page1",
        components: {
            temperatureChart1,
            temperatureChart2,
            temperatureChart3,
            processMap,
            detailChart1,
            detailChart2,
            detailChart3,
            detailChart4,
            tValueChart,
            speChart,

        },
        data() {
            return {
                date: new Date(),
                canvasParent: null,

                moduleSelect: {
                    reactorList: [{
                        value: 'module1',
                        label: '模块1'
                    }, {
                        value: 'module2',
                        label: '模块2'
                    }, {
                        value: 'module3',
                        label: '模块3'
                    }, {
                        value: 'module4',
                        label: '模块4'
                    }, {
                        value: 'module5',
                        label: '模块5'
                    }],
                    value: '',
                },
                moduleDetailInfo: {
                    detailInfo: [{
                        sensorId: "1",
                        sensorName: "传感器1",
                        value: 12,
                        percentageValue: 72.12
                    }, {
                        sensorId: "2",
                        sensorName: "传感器2",
                        value: 100,
                        percentageValue: 33.88
                    }, {
                        sensorId: "3",
                        sensorName: "传感器3",
                        value: 10,
                        percentageValue: 54.8
                    }, {
                        sensorId: "4",
                        sensorName: "传感器4",
                        value: 1140,
                        percentageValue: 16.2
                    }]
                },
                currentDetailInfo: [{
                    reactorTemperature: 50,
                    separatorTemperature: 60,
                    stripperTemperature: 15.2,
                }],
                flowDetail: {
                    data1: [
                        ['时间段', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        ['传感器1', 56.5, 82.1, 88.7, 0.1, 53.4, 85.1, 80],
                        ['传感器2', 51.1, 51.4, 15.1, 53.3, 7.8, 68.7, 15.5],
                        ['传感器3', 35, 37.8, 89.5, 10.4, 53.62, 32.5, 55.3],
                        ['传感器14', 25.2, 37.1, 41.2, 18, 33.9, 10.1, 0.9]
                    ],
                    data2: [
                        ['时间段', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        ['传感器1', 99, 82.1, 25.7, 75.1, 53.4, 25.1, 80],
                        ['传感器2', 51.1, 51.4, 55.1, 53.3, 75.8, 68.7, 15.5],
                        ['传感器3', 10, 62.2, 69.5, 36.4, 77.2, 58.5, 55.3],
                    ],
                    data3: [
                        ['时间段', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        ['传感器1', 10, 82.1, 368.7, 75.1, 53.4, 85.1, 85],
                        ['传感器2', 51.1, 51.4, 55.1, 53.3, 73.8, 75.7, 15.5],
                    ],
                    data4: [
                        ['时间段', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        ['传感器1', 20, 15.1, 88.7, 10.1, 75.4, 77.1, 45],
                        ['传感器2', 59.1, 51.4, 55.1, 15.3, 15.8, 15.7, 15.5],
                    ]
                },
                predictData: {
                    predicts: {
                        predictId: [],
                        insertTime: [],
                        TValue: [],
                        SPE: [],
                    },
                    standard: {
                        standardSPE: 0,
                        standardT2: 0
                    }
                },
                allSensor: {},
                drawer: false,
                resizeFn: null
            }
        },
        methods: {
            format(percentage) {
                return ``;
            },
            openAlert() {
                var day = moment(this.date).format('YYYY年MM月DD日');
                var time = moment(this.date).format('HH:mm');

                this.$msgbox({
                    title: '今天是：' + day,
                    message: this.$createElement('div', null, [
                        this.$createElement('p', {
                            style: {
                                color: '#000',
                                fontSize: '17px',
                                lineHeight: '20px',
                                marginBottom: '10px'
                            }
                        }, '现在是：' + time),
                        this.$createElement('p', "这是一张图片")
                    ]),
                })
            },
            customColorMethod(percentage) {
                if (percentage < 30) {
                    return '#FF7700';
                } else if (percentage < 70) {
                    return '#009DFF';
                } else {
                    return '#FF0000';
                }
            },
            getModuleList() {
                var _this = this;
                var res = getReactorCategoryList();
                res.then((res) => {
                    if (res.status == 200) {
                        _this.moduleSelect.reactorList = res.data;
                    }
                }).catch((e) => {
                    console.log("getModuleList: 失败", e);
                })
            },
            getSensorList() {
                var _this = this;
                if (_this.moduleSelect.value != "") {
                    var res = getReactorSensorList(_this.moduleSelect.value);
                    res.then((res) => {
                        if (res.status == 200) {
                            _this.moduleDetailInfo.detailInfo = res.data;
                        }
                    }).catch((e) => {
                        console.log("getSensorList: 失败", e);
                    })
                }
            },
            getCurrentInfo() {
                var _this = this;
                var res = getCurrentReactorSensorList();
                res.then((res) => {
                    if (res.status == 200) {
                        _this.currentDetailInfo = res.data;
                    }
                }).catch((e) => {
                    console.log("getCurrentInfo: 失败", e);
                })
            },
            getOperateSensor() {
                var _this = this;
                var res = getReactorAllSensorList();
                res.then((res) => {
                    if (res.status == 200) {
                        _this.flowDetail = res.data;
                    }
                }).catch((e) => {
                    console.log("getOperateSensor: 失败", e);
                })
            },
            trainModel() {
                var res = trainModelService();
                res.then((res) => {
                    if (res.status == 200) {
                        console.log("trainModel: 成功");
                    }
                }).catch((e) => {
                    console.log("trainModel: 失败", e);
                })
            },
            predictModel() {
                var _this = this;
                var res = predictModelService();
                res.then((res) => {
                    if (res.status == 200) {
                        _this.predictData = res.data;
                        console.log("predictModel: 成功");
                        console.log(_this.predictData);
                    }
                }).catch((e) => {
                    console.log("predictModel: 失败", e);
                })
            },
            getAllSensor() {
                var _this = this;
                var res = getAllSensorList();
                res.then((res) => {
                    if (res.status == 200) {
                        _this.allSensor = res.data;
                        console.log("getAllSensor: 成功");
                        console.log(_this.allSensor);
                    }
                }).catch((e) => {
                    console.log("getAllSensor: 失败", e);
                })
            }
        },
        mounted() {
            this.canvasParent = this.$refs.canvasParent;

            this.openAlert();
            this.trainModel();

            this.getModuleList();

            this.intervalId = setInterval(() => {
                this.getSensorList();
                this.getCurrentInfo();
                this.getOperateSensor();
                this.getAllSensor();
                this.predictModel();
            }, 2000);

            window.addEventListener('resize', this.resizeFn)

        },
        beforeDestroy() {
            window.removeEventListener('resize', this.resizeFn);
            clearInterval(this.intervalId);
        }
    }
</script>

<style lang="less" scoped>
  .page1 {
    height: 100%;
    width: 100%;
    padding: 0px 0px 0px;
    background: #ffffff;
    overflow: hidden;

    .ivu-col {
      height: 100%;
    }

    .left,
    .right1-1,
    .center-bottom {
      height: 100%;
      border: 1px solid #878787;
      position: relative;
      background: #ffffff;

      #left_5 {
        height: 100%;
        width: 45%;
        float: left;
      }

      #left_6 {
        height: 100%;
        width: 55%;
        float: left;
      }

      .circular {
        height: 100%;

        .canvas {
          height: 100%;
          width: 100%;
          float: left;

          .subtitle {
            font-size: 12px;
            font-weight: bold;
            color: #fff;
            height: 25px;
            padding: 10px 0;
            text-align: center;
          }

          .canvasList {
            height: calc(~'100% - 25px');
            text-align: center
          }
        }
      }

      .left1 {
        border-bottom: 1px solid #878787;
        background: #ffffff;
      }

      .title {
        position: absolute;
        display: inline-block;
        color: #6EDDF1;
        border: 2px solid #6EDDF1;
        height: 18px;
        padding: 0 2px;
        left: 50%;
        transform: translate(-50%, -50%);

        .title-text {
          position: relative;
          font-size: 16px;
          background: #09102E;
          display: inline-block;
          padding: 0 4px;
          transform: translateY(-5px);
        }
      }
    }

    .center-top {
      height: 65%;
    }

    .center-bottom {
      height: 35%;

      .bottom-radars {
        height: 55%;
      }

      .bottom-bars {
        height: 45%;
      }
    }

    .right-1 {
      height: 100%;

      .right1-1 {
        height: 100%;
      }
    }


  }
</style>
